<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="交易流水号">
        <el-input v-model="form.orderNo" placeholder="交易流水号" style="width: 130px" />
      </el-form-item>

      <el-form-item label="业务订单号">
        <el-input v-model="form.businessOrderPlanNo" placeholder="业务订单号" style="width: 130px" />
      </el-form-item>

      <el-form-item label=" 交易账户:">
        <el-input v-model="form.tradeAccount" placeholder="交易账户" style="width: 130px" />
      </el-form-item>

      <el-form-item label=" 交易账号:">
        <el-input v-model="form.tradeAccountNo" placeholder="交易账号" style="width: 130px" />
      </el-form-item>

      <el-form-item label="交易账户类型">
        <el-select v-model="form.tradeAccountType" placeholder="交易账户类型" style="width: 130px">
          <el-option label="微信" value="1" />
          <el-option label="支付宝" value="2" />
          <el-option label="银行卡" value="3" />
          <el-option label="拉卡拉" value="4" />
        </el-select>
      </el-form-item><br>

      <el-form-item label="用户类型">
        <el-select v-model="form.userType" placeholder="用户类型" style="width: 130px">
          <el-option label="个人用户" value="1" />
          <el-option label="企业用户" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="支付方式">
        <el-select v-model="form.payWay" placeholder="支付方式" style="width: 130px">
          <el-option label="微信扫码" value="1" />
          <el-option label="支付宝扫码" value="2" />
          <el-option label="微信公众号" value="3" />
          <el-option label="认证支付" value="4" />
          <el-option label="实时代付到银行卡" value="5" />
          <el-option label="批量代付到银行卡" value="20" />
        </el-select>
      </el-form-item>

      <el-form-item label="结算金额">
        <el-input v-model="form.finalAmount" placeholder="结算金额" style="width: 130px" />
      </el-form-item>

      <el-form-item label="交易对手">
        <el-input v-model="form.tradeUser" placeholder="交易对手" style="width: 130px" />
      </el-form-item>
      <el-form-item label="对手账号">
        <el-input v-model="form.dsAccount" placeholder="对手账号" style="width: 130px" />
      </el-form-item><br>
      <el-form-item label="交易渠道">
        <el-input v-model="form.tradeQudao" placeholder="交易渠道" style="width: 130px" />
      </el-form-item>

      <el-form-item label="渠道订单号">
        <el-input v-model="form.qudaoOrderNo" placeholder="渠道订单号" style="width: 130px" />
      </el-form-item>

      <el-form-item label="交易结果">
        <el-select v-model="form.tradeResult" placeholder="交易结果" style="width: 130px">
          <el-option label="处理中" value="1" />
          <el-option label="成功" value="2" />
          <el-option label="失败" value="3" />
        </el-select>
      </el-form-item>

      <el-form-item label="订单金额">
        <el-input v-model="form.amount" placeholder="订单金额" style="width: 130px" />
      </el-form-item>

      <el-form-item label="支付金额">
        <el-input v-model="form.payAmount" placeholder="支付金额" style="width: 130px" />
      </el-form-item>

      <!--      <el-form-item label="">
        <el-date-picker v-model="form.t1" type="date" placeholder="开始时间" style="width: 200px;" />
        <el-date-picker v-model="form.t2" type="date" placeholder="结束时间" style="width: 200px;" />
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="warning" plain @click="empty">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="orderNo"
        label="交易流水号"
        width="180"
      />
      <el-table-column
        prop="businessOrderPlanNo"
        label="业务订单号"
        width="180"
      />
      <el-table-column
        label="交易账户类型"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.tradeAccountType==1">微信</span>
          <span v-if="scope.row.tradeAccountType==2">支付宝</span>
          <span v-if="scope.row.tradeAccountType==3">银行卡</span>
          <span v-if="scope.row.tradeAccountType==4">拉卡拉</span>
        </template>
      </el-table-column>
      <el-table-column
        label="用户类型"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.userType==1">个人用户</span>
          <span v-if="scope.row.userType==2">企业用户</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="tradeAccountNo"
        label="交易账号"
      />
      <el-table-column
        prop="tradeAccount"
        label="交易账户"
      />
      <el-table-column
        prop="payWay"
        label="支付方式"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payWay==1">微信扫码</span>
          <span v-if="scope.row.payWay==2">支付宝扫码</span>
          <span v-if="scope.row.payWay==3">微信公众号</span>
          <span v-if="scope.row.payWay==4">认证支付</span>
          <span v-if="scope.row.payWay==5">实时代付到银行卡</span>
          <span v-if="scope.row.payWay==20">批量代付到银行卡</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="finalAmount"
        label="结算金额"
      />
      <el-table-column
        prop="tradeUser"
        label="交易对手"
      />
      <el-table-column
        prop="dsAccount"
        label="对手账号"
      />
      <el-table-column
        prop="tradeQudao"
        label="交易渠道"
      />
      <el-table-column
        prop="qudaoOrderNo"
        label="渠道订单号"
      />
      <el-table-column
        prop="tradeResult"
        label="交易结果"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.tradeResult==1">处理中</span>
          <span v-if="scope.row.tradeResult==2">成功</span>
          <span v-if="scope.row.tradeResult==3">失败</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="returnCode"
        label="返回码"
      />
      <el-table-column
        prop="returnMsg"
        label="返回信息"
      />
      <el-table-column
        prop="tradeDateFq"
        label="发起交易日期"
      />
      <el-table-column
        prop="tradeDateZx"
        label="执行交易日期"
      />
      <el-table-column
        prop="tradeDateJz"
        label="支付截止日期"
      />
      <el-table-column
        prop="tradeRate"
        label="	费率	"
      />
      <el-table-column
        prop="commissionFee"
        label="手续费"
      />
      <el-table-column
        prop="amount"
        label="订单金额"
      />
      <el-table-column
        prop="payAmount"
        label="支付金额"
      />
    </el-table>
    <el-pagination
      :current-page="form.pageNum"
      :page-sizes="[10,12,15,20]"
      :page-size="form.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: null,
      form: {
        pageNum: null,
        pageSize: null,
        name: '',
        t1: '',
        t2: '',
        orderNo: '',
        businessOrderPlanNo: '',
        tradeAccount: '',
        tradeAccountNo: '',
        tradeAccountType: null,
        userType: null,
        payWay: null,
        finalAmount: null,
        tradeUser: '',
        dsAccount: '',
        tradeQudao: '',
        qudaoOrderNo: '',
        tradeResult: null,
        amount: null,
        payAmount: null
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.form.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.form.pageNum = val
      this.init()
    },
    init() {
      this.axios.get('http://127.0.0.1/api/cw/wish/t-cw-pay-order/list', { params: this.form }).then((response) => {
        this.tableData = response.data.obj.list
        this.form.pageNum = response.data.obj.pageNum
        this.form.pageSize = response.data.obj.pageSize
        this.total = response.data.obj.total
      })
    },
    empty() {
      this.form.name = ''
      this.form.t1 = ''
      this.form.t2 = ''
      this.form.orderNo = ''
      this.form.businessOrderPlanNo = ''
      this.form.tradeAccount = ''
      this.form.tradeAccountNo = ''
      this.form.tradeAccountType = null
      this.form.userType = null
      this.form.payWay = null
      this.form.finalAmount = null
      this.form.tradeUser = ''
      this.form.dsAccount = ''
      this.form.tradeQudao = ''
      this.form.qudaoOrderNo = ''
      this.form.tradeResult = null
      this.form.amount = null
      this.form.payAmount = null
    },
    onSubmit() {
      this.init()
    }
  }
}
</script>
